/**
 * 节流防抖函数
 * id: 被点击对象的唯一标识
 * fun: 点击后的回调函数
 * time: 多久内节流
 * model: 哪种模式，默认是第一种
 */

// 定义一个容器存放点击的元素与对应的计时器
let preventList = {}

const prevent = function (id, fun, time, model = 1) {
  switch (model) {
    case 1:
      model1(id, fun, time)
      break;
    case 2:
      model2(id, fun, time)
      break;
    case 3:
      model3(id, fun, time)
      break;
  }
}

// 模式1，节流模式。第一次点击触发，之后每隔time秒,若点击会再次触发。
function model1(id, fun, time) {
  if (preventList['can'+id]) return; // 容器中元素状态为true时不执行
  // 第一次容器没元素会执行回调
  fun();
  preventList['can'+id] = true; // 第一次往容器中添加元素状态
  // 容器中添加计时器，设置多少秒之后再一次执行回调
  preventList['time'+id] = setTimeout(() => {
    // 元素状态为false时才能执行回调
    preventList['can'+id] = false;
  }, time)
}

//模式2，防抖模式，后防抖。每次点击间隔不超过time秒时，只有最后一次触发。
function model2(id, fun, time) {
  // 每次点击一开始就清空容器内的计时器
  clearTimeout(preventList['time'+id])
  preventList['time'+id] = setTimeout(() => {
    fun();
  }, time)
}

// 模式3，防抖模式。前防抖。第一次点击触发, 之后每次点击间隔不超过time秒，一直不再触发。
function model3(id, fun, time) {
  if (preventList['can'+id]) {
    clearTimeout(preventList['time'+id])
  } else {
    fun();
    preventList['can'+id] = true;
  }
  preventList['time'+id] = setTimeout(() => {
    preventList['can'+id] = false;
  }, time)
}

export default prevent